<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="modal inmodal fade" id="sampleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Add Sample</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal m" id="form-sample">
                    <div class="nav-tabs-custom">
                        <ul id="expTab" class="nav nav-tabs">
                            <li class="active"><a href="#sam_info" data-toggle="tab" aria-expanded="true">基本信息</a>
                            </li>
                            <li><a href="#selSer" data-toggle="tab" aria-expanded="false">选择服务</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="sam_info">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">样品名称：</label>
                                    <div class="col-sm-4">
                                        <input name="samName" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">描述：</label>
                                    <div class="col-sm-8">
                                        <input name="samDes" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">样品量：</label>
                                    <div class="col-sm-4">
                                        <input name="quantity" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">slot：</label>
                                    <div class="col-sm-4">
                                        <input name="samSlot" class="form-control" type="number" required min="1"
                                               max="24">
                                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 对应进样器的样品管位置</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分子式：</label>
                                    <div class="col-sm-4">
                                        <input name="mFormula" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分子量：</label>
                                    <div class="col-sm-4">
                                        <input name="mWeight" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="selSer">
                                <ul class="col-sm-10 sortable-list connectList agile-list" id="select-ul-sam">

                                </ul>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">溶剂：</label>
                                    <div class="col-sm-4">
                                        <select class="form-control" name="solvent">

                                        </select>
                                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 溶剂在方法中已被限定范围</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">是否优先：</label>
                                    <div class="col-sm-4">
                                        <label class="toggle-switch switch-solid">
                                            <input type="checkbox" id="status">
                                            <span></span>
                                        </label>
                                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 休先实验需要对应权限</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="saveSam" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>